<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <Header></Header>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu @open="handleOpen" @close="handleClose">
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <IconHome />
                </el-icon>
                <span>Home</span>
              </template>
              <el-menu-item index="1-1">
                <router-link to="/glance">Glance</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <el-icon>
                  <IconInfo></IconInfo>
                </el-icon>
                <router-link to="/about">About</router-link>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <IconAward></IconAward>
                </el-icon>
                <span>Reactivity Core</span>
              </template>
              <el-menu-item index="2-3">
                <router-link to="/ref">Ref</router-link>
              </el-menu-item>
              <el-menu-item index="2-4">
                <router-link to="/reactive">Reactive</router-link>
              </el-menu-item>
              <el-menu-item index="2-5">
                <router-link to="/computed">Computed</router-link>
              </el-menu-item>
              <el-menu-item index="2-6">
                <router-link to="/readonly">Readonly</router-link>
              </el-menu-item>
              <el-menu-item index="2-7">
                <router-link to="/watch">Watch&WatchEffect</router-link>
              </el-menu-item>
              <el-menu-item index="2-8">
                <router-link to="/torefs">toRefs&toRef</router-link>
              </el-menu-item>
              <el-menu-item index="2-9">
                <router-link to="/hooks">Hooks or Lifecycle</router-link>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <IconPinia />
                </el-icon>
                <span>Pinia</span>
              </template>
              <el-menu-item index="3-1">
                <!-- <router-link to="/pinia-father">Father</router-link> -->
                <router-link :to="{
                  path: '/pinia-father'
                }">Father</router-link>
              </el-menu-item>
              <el-menu-item index="3-2">
                <router-link :to="{
                  name: 'pinia-child',
                }">Child</router-link>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4">
              <template #title>
                <el-icon>
                  <IconRouter />
                </el-icon>
                <span>Router</span>
              </template>
              <el-menu-item index="4-1">
                <!-- <router-link to="/pinia-father">Father</router-link> -->
                <router-link :to="{
                  path: '/router-summary'
                }">Summary</router-link>
              </el-menu-item>
              <el-menu-item index="4-2">
                <!-- <router-link to="/pinia-father">Father</router-link> -->
                <router-link :to="{
                  path: '/router-summaryquery'
                }">Summary Query</router-link>
              </el-menu-item>
              <el-menu-item index="4-3">
                <!-- <router-link to="/pinia-father">Father</router-link> -->
                <router-link :to="{
                  path: '/router-summaryprops'
                }">Summary Props</router-link>
              </el-menu-item>
              <el-menu-item index="4-4">
                <!-- <router-link to="/pinia-father">Father</router-link> -->
                <router-link :to="{
                  path: '/router-summaryquery2props'
                }">Summary Query2Props</router-link>
              </el-menu-item>
              <el-menu-item index="4-5">
                <!-- <router-link to="/pinia-father">Father</router-link> -->
                <router-link :to="{
                  path: '/router-navigator'
                }">Router Navigator</router-link>
              </el-menu-item>
            </el-sub-menu>

            <!-- slots -->
            <el-sub-menu index="5">
              <template #title>
                <el-icon>
                  <IconRouter />
                </el-icon>
                <span>Slots</span>
              </template>
              <el-menu-item index="5-1">
                <!-- <router-link to="/pinia-father">Father</router-link> -->
                <router-link :to="{
                  path: '/slots-summary'
                }">Default slot</router-link>
              </el-menu-item>
              <el-menu-item index="5-2">
                <!-- <router-link to="/pinia-father">Father</router-link> -->
                <router-link :to="{
                  path: '/slots-named'
                }">Named slots</router-link>
              </el-menu-item>
              <el-menu-item index="5-3">
                <!-- <router-link to="/pinia-father">Father</router-link> -->
                <router-link :to="{
                  path: '/slots-scoped'
                }">scoped slots</router-link>
              </el-menu-item>

            </el-sub-menu>

            <!-- pass value -->
            <el-sub-menu index="7">
              <template #title>
                <el-icon>
                  <IconRouter />
                </el-icon>
                <span>Pass Value</span>
              </template>
              <el-menu-item index="7-1">
                <router-link :to="{
                  path: '/pass-value-props-parents'
                }">Props-Parents</router-link>
              </el-menu-item>

              <el-menu-item index="7-2">
                <router-link :to="{
                  path: '/pass-value-customevent-parents'
                }">Custom Event-Parents</router-link>
              </el-menu-item>

              <el-menu-item index="7-3">
                <router-link :to="{
                  path: '/pass-value-mitt-parents'
                }">Mitt-Parents</router-link>
              </el-menu-item>

            </el-sub-menu>
            <!-- others -->
            <el-sub-menu index="6">
              <template #title>
                <el-icon>
                  <IconRouter />
                </el-icon>
                <span>Others</span>
              </template>
              <el-menu-item index="6-2">
                <!-- <router-link to="/pinia-father">Father</router-link> -->
                <router-link :to="{
                  path: '/other-suspense'
                }">Suspense</router-link>
              </el-menu-item>

            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <RouterView></RouterView>
          </el-main>
          <el-footer>Arthur@2025</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
// import HomeView from './views/GlanceView.vue'
import Header from './components/Header.vue'
import IconAward from './components/icons/IconAward.vue'
import IconHome from './components/icons/IconHome.vue'
import IconInfo from './components/icons/IconInfo.vue'
import IconPinia from './components/icons/IconPinia.vue'
import IconRouter from './components/icons/IconRouter.vue'

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
// router = [
//   {
//     path: '/',
//     name: 'glance',
//     component: () => import('./views/GlanceView.vue'),
//   },
//   {
//     path: '/about',
//     name: 'about',
//     component: () => import('./views/AboutView.vue'),
//   },
//   {
//     path: '/ref',
//     name: 'ref',
//     component: () => import('./views/RefView.vue'),
//   },
//   {
//     path: '/reactive',
//     name: 'reactive',
//     component: () => import('./views/ReactiveView.vue'),
//   },
//   {
//     path: '/computed',
//     name: 'computed',
//     component: () => import('./views/ComputedView.vue'),
//   },
//   {
//     path: '/readonly',
//     name: 'readonly',
//     component: () => import('./views/ReadonlyView.vue'),
//   },
// {
//   path: '/watch',
//   name: 'watch',
//   component: () => import('./views/WatchView.vue'),
// },
// {
//   path: '/lifecycle',
//   name: 'lifecycle',
//   component: () => import('./views/LifecycleView.vue'),
// },
// {
//   path: '/provide',
//   name: 'provide',
//   component: () => import('./views/ProvideView.vue'),
// },
// {
//   path: '/emit',
//   name: 'emit',
//   component: () => import('./views/EmitView.vue'),
// },
// {
//   path: '/attrs',
//   name: 'attrs',
//   component: () => import('./views/AttrsView.vue'),
// },
// {
//   path: '/slot',
//   name: 'slot',
//   component: () => import('./views/SlotView.vue'),
// },
// }
// ]
</script>

<style scoped></style>
